<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>用户管理</title>
		<meta name="description" content="">
		<meta name="author" content="templatemo">
		<!-- 
    Visual Admin Template
    http://www.templatemo.com/preview/templatemo_455_visual_admin
    -->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700' rel='stylesheet' type='text/css'>
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/templatemo-style.css" rel="stylesheet">

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

	</head>

	<body>
		<!-- Left column -->
		<div class="templatemo-flex-row">
			<div class="templatemo-sidebar">
				<header class="templatemo-site-header">
					<div class="square"></div>
					<h1>爱学习用户管理</h1>
				</header>
				<div class="profile-photo-container">
					<img src="images/logo.jpg" alt="Profile Photo" class="img-responsive">
					<div class="profile-photo-overlay"></div>
				</div>
				<!-- Search box -->
				<div class="mobile-menu-icon">
					<i class="fa fa-bars"></i>
				</div>
				<nav class="templatemo-left-nav">
					<ul>
						<li>
							<a href="${pageContext.request.contextPath}/back/index.jsp"><i class="fa fa-home fa-fw"></i>教师管理</a>
						</li>

						<li>
							<a href="${pageContext.request.contextPath}/back/course-management.jsp"><i class="fa fa-database fa-fw"></i>课程管理</a>
						</li>
						<li>
							<a href="manage-users.jsp" class="active"><i class="fa fa-map-marker fa-fw"></i>用户管理</a>
						</li>

						<li>
							<a href="${pageContext.request.contextPath}/back/user.jsp"><i class="fa fa-sliders fa-fw"></i>注册人数查看</a>
						</li>
						<li>
							<a href="${pageContext.request.contextPath}/back/login.jsp"><i class="fa fa-eject fa-fw"></i>退出</a>
						</li>
					</ul>
				</nav>
			</div>
			<!-- Main content -->
			<div class="templatemo-content col-1 light-gray-bg">
				<div class="templatemo-top-nav-container">
					<div class="row">
						<h2>欢迎：${sessionScope.managerName}</h2>
					</div>
				</div>
				<div class="templatemo-content-container">
					<div class="templatemo-content-widget no-padding">
						<div class="panel panel-default table-responsive">
							<table class="table table-striped table-bordered templatemo-user-table" id="table">
								<thead>
									<tr>
										<td>用户编号</td>
										<td>用户手机号</td>
										<td>用户姓名</td>
										<td>用户邮箱</td>
										<td>用户状态</td>
										<td>用户积分</td>
										<td>修改用户状态
										</td>
										<td>删除用户</td>
									</tr>
								</thead>
								<tbody id="account">
									<!--  <tr>
                    <td>8.</td>
                    <td>Landi</td>
                    <td>Susan</td>
                    <td>@lS</td>
                    <td>ls@company.com</td>
                    <td>100000</td>
                    <td>修改</td>
                    <td>删除</td>
                  </tr>       -->
								</tbody>
								<div class="dataTables_filter" id="DataTables_Table_0_filter">
									<label>
								     <button class="btn btn-success btn-mini" onclick="search()">搜索用户名</button>
									<button class="btn btn-info btn-mini"    onclick="clearSearch()">清除搜索</button>
								    <input type="text" aria-controls="DataTables_Table_0" id="kw" value="">
									
								</label>
								</div>
							</table>

						</div>

					</div>

				</div>

			</div>

		</div>

		<!-- 模态框 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">修改操作</h4>
					</div>
					<form>
						<div class="modal-body">
							<p>
								用户编号:<input type="text" name="accountId" value="" id="accountId" readonly="readonly" />
							</p>
							<p>
								用户姓名:<input type="text" id="accountName" name="accountName" value="" readonly="readonly" />
							</p>
							<p>
								用户状态:<input type="text" name="accountState" value="" id="accountState" />
							</p>
							<p>
								用户手机:<input type="text" id="accountPhone" name="accountPhone" value="" readonly="readonly" />
							</p>
							<p>
								<input type="hidden" name="op" value="updateState">
							</p>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary" id="update2" data-dismiss="modal">修改</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!-- JS -->
		<script type="text/javascript" src="../WebTools/Bootstrap-4.4.1/js/jquery-3.4.1.js"></script>
		<!-- jQuery -->
		<script type="text/javascript" src="js/templatemo-script.js"></script>

		<script type="text/javascript" src="../WebTools/Bootstrap3-3-7/js/bootstrap.js"></script>
        <script src="${pageContext.request.contextPath}/back/js/layer/layer.js"></script>
		<!-- Templatemo Script -->
		<script type="text/javascript">
			$(document).ready(function() {
				if('${sessionScope.managerName}' == null || '${sessionScope.managerName}' == '') {
					location.href = "login.jsp";
				}
				// Content widget with background image
				var imageUrl = $('img.content-bg-img').attr('src');
				$('.templatemo-content-img-bg').css('background-image', 'url(' + imageUrl + ')');
				$('img.content-bg-img').hide();

				$.ajax({
					async: true,
					url: "${pageContext.request.contextPath}/ManagerUserServlet",
					type: "GET",
					data: {
						op: "getAccount"
					},
					dataType: "json",
					success: function(result, status, xhr) {

						for(var i in result) {
						//	console.log(result[i])
							var state;
							if(result[i].account_state == 1) {
								state = "正常"
							} else {
								state = "注销"
							}
							$("#account").append("<tr>" +
								"<td >" + result[i].account_id + "</td>" +
								"<td >" + result[i].account_phone + "</td>" +
								"<td >" + result[i].account_name + "</td>" +
								"<td >" + result[i].account_email + "</td>" +
								"<td >" + state + "</td>" +
								"<td >" + result[i].account_Integral + "</td>" +
								"<td><button class=\"btn btn-info btn-mini\" data-toggle=\"modal\" data-target=\"#myModal\" id=\"update\"" +
								"data-accountid=\"" + result[i].account_id + "\"" +
								"data-accountphone=\"" + result[i].account_phone + "\"" +
								"data-accountname=\"" + result[i].account_name + "\"" +
								"data-accountstate=\"" + state + "\">修改</button></td>" +
								"<td><button class=\"btn btn-info btn-mini\" data-accountid=\"" + result[i].account_id + "\" id=\"delete\">删除</button></td>" +
								"</tr>");

						}
					},
					error: function(xhr, status, error) {
						layer.msg("异步请求失败!");
					}
				});
			});
			$(document).on("click", "#delete", function() {
				layer.confirm("是否确定删除",{
					btn:['确认','取消']
				},function(){
					$.ajax({
						async: true,
						url: "${pageContext.request.contextPath}/ManagerUserServlet",
						type: "get",
						data: {
							op: "deleteAccount",
							accountId: $(this).data("accountid")
						},
						dataType: "json",
						success: function(result, status, xhr) {
							layer.msg("删除成功",{icon:1,time:1000});
							//清空表格原始数据
							$("#account").empty();
							//console.log(result);
							for(var i in result) {
								console.log(result[i])
								var state;
								if(result[i].account_state == 1) {
									state = "正常"
								} else {
									state = "注销"
								}
								$("#account").append("<tr>" +
									"<td >" + result[i].account_id + "</td>" +
									"<td >" + result[i].account_phone + "</td>" +
									"<td >" + result[i].account_name + "</td>" +
									"<td >" + result[i].account_email + "</td>" +
									"<td >" + state + "</td>" +
									"<td >" + result[i].account_Integral + "</td>" +
									"<td><button class=\"btn btn-info btn-mini\" data-toggle=\"modal\" data-target=\"#myModal\" id=\"update\"" +
									"data-accountid=\"" + result[i].account_id + "\"" +
									"data-accountphone=\"" + result[i].account_phone + "\"" +
									"data-accountname=\"" + result[i].account_name + "\"" +
									"data-accountstate=\"" + state + "\">修改</button></td>" +
									"<td><button class=\"btn btn-info btn-mini\" data-accountid=\"" + result[i].account_id + "\" id=\"delete\">删除</button></td>" +
									"</tr>");
							}

						},
						error: function(xhr, status, error) {
							layer.msg("刪除异步请求失败!");
						}
					});
				});		
			});
			//修改事件
			$(document).on("click", "#update", function() {
				// 打开模态框填充数据 
				var accountId = $(this).data("accountid");
				var accountName = $(this).data("accountname");
				var accountState = $(this).data("accountstate");
				var accountPhone = $(this).data("accountphone");
				console.log(accountId, accountName, accountState, accountPhone)
				$("#myModal #accountId").val(accountId);
				$("#myModal #accountName").val(accountName);
				$("#myModal #accountState").val(accountState);
				$("#myModal #accountPhone").val(accountPhone);
			});
			$(document).on("click", "#update2", function() {
				var accountId = $("#myModal #accountId").val();

				var accountState = $("#myModal #accountState").val();
				var state2;
				if(accountState == "正常") {
					state2 = 1
				} else if(accountState == "注销") {
					state2 = 0
				}
				$.ajax({
					async: true,
					url: "${pageContext.request.contextPath}/ManagerUserServlet",
					type: "get",
					data: {
						op: "updateState",
						accountId: accountId,
						accountState: state2
					},
					dataType: "json",
					success: function(result, status, xhr) {
						layer.msg("修改成功",{icon:1,time:1000});
						//清空表格原始数据
						$("#account").empty();
						//console.log(result);
						for(var i in result) {
							console.log(result[i])
							var state;
							if(result[i].account_state == 1) {
								state = "正常"
							} else {
								state = "注销"
							}
							$("#account").append("<tr>" +
								"<td >" + result[i].account_id + "</td>" +
								"<td >" + result[i].account_phone + "</td>" +
								"<td >" + result[i].account_name + "</td>" +
								"<td >" + result[i].account_email + "</td>" +
								"<td >" + state + "</td>" +
								"<td >" + result[i].account_Integral + "</td>" +
								"<td><button class=\"btn btn-info btn-mini\" data-toggle=\"modal\" data-target=\"#myModal\" id=\"update\"" +
								"data-accountid=\"" + result[i].account_id + "\"" +
								"data-accountphone=\"" + result[i].account_phone + "\"" +
								"data-accountname=\"" + result[i].account_name + "\"" +
								"data-accountstate=\"" + state + "\">修改</button></td>" +
								"<td><button class=\"btn btn-info btn-mini\" data-accountid=\"" + result[i].account_id + "\" id=\"delete\">删除</button></td>" +
								"</tr>");
						}

					},
					error: function(xhr, status, error) {
						layer.msg("修改异步请求失败!");
					}
				});

			});

			function search() {

				$.ajax({
					async: true,
					url: "${pageContext.request.contextPath}/ManagerUserServlet",
					type: "GET",
					data: {
						op: "getAccountByAccountName",
						accountName: $("#kw").val()
					},
					dataType: "json",
					success: function(result, status, xhr) {
						//调用数据渲染方法
						$("#account").empty();
						//console.log(result);
						for(var i in result) {
							console.log(result[i])
							var state;
							if(result[i].account_state == 1) {
								state = "正常"
							} else {
								state = "注销"
							}
							$("#account").append("<tr>" +
								"<td >" + result[i].account_id + "</td>" +
								"<td >" + result[i].account_phone + "</td>" +
								"<td >" + result[i].account_name + "</td>" +
								"<td >" + result[i].account_email + "</td>" +
								"<td >" + state + "</td>" +
								"<td >" + result[i].account_Integral + "</td>" +
								"<td><button class=\"btn btn-info btn-mini\" data-toggle=\"modal\" data-target=\"#myModal\" id=\"update\"" +
								"data-accountid=\"" + result[i].account_id + "\"" +
								"data-accountphone=\"" + result[i].account_phone + "\"" +
								"data-accountname=\"" + result[i].account_name + "\"" +
								"data-accountstate=\"" + state + "\">修改</button></td>" +
								"<td><button class=\"btn btn-info btn-mini\" data-accountid=\"" + result[i].account_id + "\" id=\"delete\">删除</button></td>" +
								"</tr>");
						}
					},
					error: function(xhr, status, error) {
						layer.msg("發送异步请求失败！");

					}
				});

			}

			function clearSearch() {
				$("#kw").val("");
			}
		</script>
	</body>

</html>